<template>
  <div class="box">
    <input type="text" v-model="r" />
    <input type="text" v-model="g" />
    <input type="text" v-model="b" />
    <!--:style 代表动态绑定一个对象 他的值是一个 {} 样式对象  -->
    <!-- 当前样式对象中，只包含backgroundColor 背景颜色 -->
    <div class="color" :style="{ backgroundColor: `rgb(${r},${g},${b})` }">{{ `rgb(${r},${g},${b})` }}</div>
    <div class="color" :style="{ backgroundColor: rgb }">{{ rgb }}</div>
    <div>计算属性{{ rgb }}</div>
    <button @click="show">按钮</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      r: 0,
      g: 0,
      b: 0,
    };
  },
  // 计算属性
  computed: {
    // rgb 作为一个计算属性，被定义成了方法格式
    // 最终 在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
    rgb() {
      return `rgb(${this.r},${this.g},${this.b})`;
    },
  },
  methods: {
    show() {
      // console.log(`rgb(${this.r},${this.g},${this.b})`);
      console.log(this.rgb);
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100vh - 50px);
  background-color: #eee;
  .color {
    width: 150px;
    margin-top: 10px;
    height: 150px;
  }
}
</style>
